import authorBillboardLess from "./index.module.less";
import { SmileTwoTone, RightOutlined, PlusOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import { GetAuthorListApi } from "@/http/api/article";
import { AuthorListType } from "./utils/type";
function AuthorBillboard() {
  const [AuthorList, setAuthorList] = useState([]);
  const GetAuthorList = async () => {
    const params = {
      PageSize: 5,
      PageNum: 1,
    };
    const res: any = await GetAuthorListApi(params);
    console.log("用户列表");
    if (res.status === 0) {
      setAuthorList(res.AuthorList);
    }
  };
  useEffect(() => {
    GetAuthorList();
  }, []);
  return (
    <>
      <div className={authorBillboardLess.title_article_top}>
        <div className="top_title_article">
          <div className="left_art_title">
            <div>
              <SmileTwoTone />
            </div>
            <div className="title_billboard">作者榜</div>
          </div>
        </div>
        <div className="authorBillboder_items_content">
          {AuthorList.map((item: AuthorListType, index: number) => {
            return (
              <div className="item" key={index}>
                <div className="item_left">
                  <div className="left_header">
                    <img src={item.HeaderImg} alt="头像" />
                  </div>
                  <div className="right_info">
                    <div className="right_top_name">{item.UserName}</div>
                    <div className="right_bottom_desc">
                      {item.SelfDescription}
                    </div>
                  </div>
                </div>
                <div className="item_right">
                  <PlusOutlined />
                  <div className="like_people">关注</div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="articleBillboard_look_more">
          <div className="articleBillboard_btn_more">
            <div>查看更多</div>
            <RightOutlined />
          </div>
        </div>
      </div>
    </>
  );
}

export default AuthorBillboard;
